import React from "react";
import ReactDOM from "react-dom";

// class关键字有自己的私有数据和生命周期，function创建的组件没有私有数据和生命周期，class提供的内容更完整
//使用class 创建的组件 称为 有状态组件  使用function创建的组件我们称为 无状态组件，由于没有state和生命周期 执行的性能比有状态组件高
class Movie extends React.Component {
    constructor() {
        super(); //继承了父类，我们需要先调用super,调用了super我们才能用this
        this.state = {
            msg: "class 的 msg",
        }; //这个是存放私有 data的对象
    }

    render() {
        console.log(this.props);
        this.state.msg = "xiangcai"; //私有的属性是可以进行修改的
        // this.props.name = "james";  传递的数据 他们的属性都是只读的不能重新赋值和修改
        return ( <
            div >
            Movie组件-- - { this.props.name }--{ this.props.age } <
            h3 > { this.state.msg } < /h3> <
            /div>
        );
    }
}
const user = {
    name: "zss",
    age: 22,
    gender: "男",
};

ReactDOM.render( <
    div >
    class创建组件--{ /* movie 实例 */ } <
    Movie {...user } > < /Movie> <
    /div>,
    document.getElementById("app")
);